<template>
    <div class="goods-details">
        <div class="goods-details-tab">
            <tab bar-active-color="#de181b" active-color="#de181b">
                <tab-item selected  @on-item-click="typeHandler">商品介绍</tab-item>
                <tab-item  @on-item-click="typeHandler">规格参数</tab-item>
                <tab-item  @on-item-click="typeHandler">包装售后</tab-item>
            </tab>
        </div>
        <div class="goods-details-view">
            <div class="view-introduce" v-if="typeActiveIndex === 0">
                <m-category-box title="商品信息">
                </m-category-box>
            </div>
            <div class="view-spec" v-if="typeActiveIndex === 1">
                <m-category-box title="规格参数">
                </m-category-box>
            </div>
            <div class="view-service" v-if="typeActiveIndex === 2">
                <m-category-box title="包装售后">
                </m-category-box>
            </div>
        </div>
    </div>
</template>

<script>
    import {Tab, TabItem} from 'vux'

    export default {
        data(){
            return{
                typeActiveIndex:0
            }
        },
        components: {
            Tab,
            TabItem
        },
        methods:{
            typeHandler(index) {
                this.typeActiveIndex = index;
            }
        }
    }
</script>

<style lang="less" scoped>
    .goods-details {
        .goods-details-tab {
            position: absolute;
            top: 0px;
            width: 100%;
        }
        .goods-details-view {
            position: absolute;
            top: 44px;
            width: 100%;
            bottom: 0px;
            overflow-x: hidden;
            overflow-y: auto;
            background: white;
            .view-introduce-video{
                width:100%;
                height: 150px;
            }
        }
    }
</style>